<template>
  <div class="dashboard">
    <!-- 顶部导航栏 -->
    <header class="bg-white shadow-sm">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex justify-between h-16">
          <div class="flex">
            <div class="flex-shrink-0 flex items-center">
              <img class="h-8 w-auto" src="/logo.png" alt="学生健康上报系统" />
              <span class="ml-2 text-xl font-bold text-gray-800">学生健康上报系统</span>
            </div>
          </div>
          <div class="flex items-center">
            <div class="ml-3 relative">
              <div class="flex items-center space-x-4">
                <Bell class="h-5 w-5 text-gray-500" />
                <div class="flex items-center">
                  <img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="" />
                  <span class="ml-2 text-sm font-medium text-gray-700">王校长</span>
                  <ChevronDown class="ml-1 h-4 w-4 text-gray-500" />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </header>

    <div class="flex">
      <!-- 侧边栏 -->
      <aside class="w-64 bg-gray-800 min-h-screen">
        <nav class="mt-5 px-2">
          <div class="space-y-1">
            <a href="#" class="bg-gray-900 text-white group flex items-center px-2 py-2 text-base font-medium rounded-md">
              <LayoutDashboard class="mr-3 h-5 w-5" />
              数据看板
            </a>
            <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white group flex items-center px-2 py-2 text-base font-medium rounded-md">
              <Users class="mr-3 h-5 w-5" />
              学院管理
            </a>
            <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white group flex items-center px-2 py-2 text-base font-medium rounded-md">
              <ClipboardList class="mr-3 h-5 w-5" />
              上报记录
            </a>
            <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white group flex items-center px-2 py-2 text-base font-medium rounded-md">
              <AlertTriangle class="mr-3 h-5 w-5" />
              异常管理
            </a>
            <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white group flex items-center px-2 py-2 text-base font-medium rounded-md">
              <FileText class="mr-3 h-5 w-5" />
              统计报表
            </a>
            <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white group flex items-center px-2 py-2 text-base font-medium rounded-md">
              <Settings class="mr-3 h-5 w-5" />
              系统设置
            </a>
          </div>
        </nav>
      </aside>

      <!-- 主内容区 -->
      <main class="flex-1 bg-gray-100 p-6">
        <div class="max-w-7xl mx-auto">
          <!-- 页面标题 -->
          <div class="mb-6">
            <h1 class="text-2xl font-semibold text-gray-900">数据看板</h1>
            <p class="mt-1 text-sm text-gray-500">实时监控全校健康上报数据</p>
          </div>

          <!-- 数据概览卡片 -->
          <div class="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4 mb-6">
            <!-- 上报完成率 -->
            <div class="bg-white overflow-hidden shadow rounded-lg">
              <div class="px-4 py-5 sm:p-6">
                <div class="flex items-center">
                  <div class="flex-shrink-0 bg-green-100 rounded-md p-3">
                    <CheckCircle class="h-6 w-6 text-green-600" />
                  </div>
                  <div class="ml-5 w-0 flex-1">
                    <dl>
                      <dt class="text-sm font-medium text-gray-500 truncate">上报完成率</dt>
                      <dd>
                        <div class="flex items-baseline">
                          <div class="text-2xl font-semibold text-gray-900">{{ statistics.reportCompletionRate }}%</div>
                          <div class="ml-2 flex items-baseline text-sm font-semibold text-green-600">
                            <ArrowUp class="self-center flex-shrink-0 h-4 w-4 text-green-500" />
                            <span class="sr-only">增加</span>
                            2.5%
                          </div>
                        </div>
                      </dd>
                    </dl>
                  </div>
                </div>
              </div>
              <div class="bg-gray-50 px-4 py-4 sm:px-6">
                <div class="text-sm">
                  <a href="#" class="font-medium text-blue-600 hover:text-blue-500">查看详情<span class="sr-only">上报完成率</span></a>
                </div>
              </div>
            </div>

            <!-- 今日上报数 -->
            <div class="bg-white overflow-hidden shadow rounded-lg">
              <div class="px-4 py-5 sm:p-6">
                <div class="flex items-center">
                  <div class="flex-shrink-0 bg-blue-100 rounded-md p-3">
                    <CalendarCheck class="h-6 w-6 text-blue-600" />
                  </div>
                  <div class="ml-5 w-0 flex-1">
                    <dl>
                      <dt class="text-sm font-medium text-gray-500 truncate">今日上报数</dt>
                      <dd>
                        <div class="flex items-baseline">
                          <div class="text-2xl font-semibold text-gray-900">{{ statistics.todayReportCount }}</div>
                          <div class="ml-2 flex items-baseline text-sm font-semibold text-green-600">
                            <ArrowUp class="self-center flex-shrink-0 h-4 w-4 text-green-500" />
                            <span class="sr-only">增加</span>
                            12%
                          </div>
                        </div>
                      </dd>
                    </dl>
                  </div>
                </div>
              </div>
              <div class="bg-gray-50 px-4 py-4 sm:px-6">
                <div class="text-sm">
                  <a href="#" class="font-medium text-blue-600 hover:text-blue-500">查看详情<span class="sr-only">今日上报数</span></a>
                </div>
              </div>
            </div>

            <!-- 异常上报数 -->
            <div class="bg-white overflow-hidden shadow rounded-lg">
              <div class="px-4 py-5 sm:p-6">
                <div class="flex items-center">
                  <div class="flex-shrink-0 bg-red-100 rounded-md p-3">
                    <AlertCircle class="h-6 w-6 text-red-600" />
                  </div>
                  <div class="ml-5 w-0 flex-1">
                    <dl>
                      <dt class="text-sm font-medium text-gray-500 truncate">异常上报数</dt>
                      <dd>
                        <div class="flex items-baseline">
                          <div class="text-2xl font-semibold text-gray-900">{{ statistics.abnormalCount }}</div>
                          <div class="ml-2 flex items-baseline text-sm font-semibold text-red-600">
                            <ArrowUp class="self-center flex-shrink-0 h-4 w-4 text-red-500" />
                            <span class="sr-only">增加</span>
                            5%
                          </div>
                        </div>
                      </dd>
                    </dl>
                  </div>
                </div>
              </div>
              <div class="bg-gray-50 px-4 py-4 sm:px-6">
                <div class="text-sm">
                  <a href="#" class="font-medium text-blue-600 hover:text-blue-500">查看详情<span class="sr-only">异常上报数</span></a>
                </div>
              </div>
            </div>

            <!-- 未上报数 -->
            <div class="bg-white overflow-hidden shadow rounded-lg">
              <div class="px-4 py-5 sm:p-6">
                <div class="flex items-center">
                  <div class="flex-shrink-0 bg-yellow-100 rounded-md p-3">
                    <Clock class="h-6 w-6 text-yellow-600" />
                  </div>
                  <div class="ml-5 w-0 flex-1">
                    <dl>
                      <dt class="text-sm font-medium text-gray-500 truncate">未上报数</dt>
                      <dd>
                        <div class="flex items-baseline">
                          <div class="text-2xl font-semibold text-gray-900">{{ statistics.notReportedCount }}</div>
                          <div class="ml-2 flex items-baseline text-sm font-semibold text-green-600">
                            <ArrowDown class="self-center flex-shrink-0 h-4 w-4 text-green-500" />
                            <span class="sr-only">减少</span>
                            3%
                          </div>
                        </div>
                      </dd>
                    </dl>
                  </div>
                </div>
              </div>
              <div class="bg-gray-50 px-4 py-4 sm:px-6">
                <div class="text-sm">
                  <a href="#" class="font-medium text-blue-600 hover:text-blue-500">查看详情<span class="sr-only">未上报数</span></a>
                </div>
              </div>
            </div>
          </div>

          <!-- 图表区域 -->
          <div class="grid grid-cols-1 gap-5 lg:grid-cols-2 mb-6">
            <!-- 上报趋势图 -->
            <div class="bg-white overflow-hidden shadow rounded-lg">
              <div class="px-4 py-5 sm:px-6">
                <h3 class="text-lg leading-6 font-medium text-gray-900">上报趋势</h3>
                <p class="mt-1 max-w-2xl text-sm text-gray-500">近7天上报数据趋势</p>
              </div>
              <div class="px-4 py-5 sm:p-6">
                <div class="h-64 bg-gray-50 rounded flex items-center justify-center">
                  <div class="text-center">
                    <BarChart class="w-12 h-12 text-gray-400 mx-auto" />
                    <p class="mt-2 text-sm text-gray-500">趋势图将在这里显示</p>
                    <p class="text-xs text-gray-400">可集成ECharts或Chart.js等图表库</p>
                  </div>
                </div>
              </div>
            </div>

            <!-- 异常类型分布 -->
            <div class="bg-white overflow-hidden shadow rounded-lg">
              <div class="px-4 py-5 sm:px-6">
                <h3 class="text-lg leading-6 font-medium text-gray-900">异常类型分布</h3>
                <p class="mt-1 max-w-2xl text-sm text-gray-500">各类异常情况占比</p>
              </div>
              <div class="px-4 py-5 sm:p-6">
                <div class="h-64 bg-gray-50 rounded flex items-center justify-center">
                  <div class="text-center">
                    <PieChart class="w-12 h-12 text-gray-400 mx-auto" />
                    <p class="mt-2 text-sm text-gray-500">饼图将在这里显示</p>
                    <p class="text-xs text-gray-400">可集成ECharts或Chart.js等图表库</p>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 学院上报情况 -->
          <div class="bg-white shadow overflow-hidden sm:rounded-md mb-6">
            <div class="px-4 py-5 sm:px-6">
              <h3 class="text-lg leading-6 font-medium text-gray-900">学院上报情况</h3>
              <p class="mt-1 max-w-2xl text-sm text-gray-500">各学院上报完成情况统计</p>
            </div>
            <div class="border-t border-gray-200">
              <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200">
                  <thead class="bg-gray-50">
                    <tr>
                      <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">学院名称</th>
                      <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">上报人数</th>
                      <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">总人数</th>
                      <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">完成率</th>
                      <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">异常数</th>
                      <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">最后上报时间</th>
                    </tr>
                  </thead>
                  <tbody class="bg-white divide-y divide-gray-200">
                    <tr v-for="(college, index) in collegeReports" :key="index">
                      <td class="px-6 py-4 whitespace-nowrap">
                        <div class="text-sm font-medium text-gray-900">{{ college.name }}</div>
                      </td>
                      <td class="px-6 py-4 whitespace-nowrap">
                        <div class="text-sm text-gray-900">{{ college.reportedCount }}</div>
                      </td>
                      <td class="px-6 py-4 whitespace-nowrap">
                        <div class="text-sm text-gray-900">{{ college.totalCount }}</div>
                      </td>
                      <td class="px-6 py-4 whitespace-nowrap">
                        <div class="flex items-center">
                          <span 
                            :class="{
                              'px-2 py-1 text-xs rounded-full': true,
                              'bg-green-100 text-green-800': college.completionRate === 100,
                              'bg-yellow-100 text-yellow-800': college.completionRate >= 50 && college.completionRate < 100,
                              'bg-red-100 text-red-800': college.completionRate < 50
                            }"
                          >
                            {{ college.completionRate }}%
                          </span>
                        </div>
                      </td>
                      <td class="px-6 py-4 whitespace-nowrap">
                        <div class="text-sm text-gray-900">{{ college.abnormalCount }}</div>
                      </td>
                      <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                        {{ college.lastReportTime }}
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>

          <!-- 最近异常情况 -->
          <div class="bg-white shadow overflow-hidden sm:rounded-md">
            <div class="px-4 py-5 sm:px-6">
              <h3 class="text-lg leading-6 font-medium text-gray-900">最近异常情况</h3>
              <p class="mt-1 max-w-2xl text-sm text-gray-500">需要关注的异常上报记录</p>
            </div>
            <div class="border-t border-gray-200">
              <ul role="list" class="divide-y divide-gray-200">
                <li v-for="(abnormal, index) in recentAbnormals" :key="index">
                  <a href="#" class="block hover:bg-gray-50">
                    <div class="px-4 py-4 sm:px-6">
                      <div class="flex items-center justify-between">
                        <div class="flex items-center">
                          <div class="flex-shrink-0">
                            <img class="h-10 w-10 rounded-full" :src="abnormal.avatar" alt="" />
                          </div>
                          <div class="ml-4">
                            <div class="text-sm font-medium text-blue-600">{{ abnormal.name }}</div>
                            <div class="text-sm text-gray-500">{{ abnormal.college }} · {{ abnormal.class }}</div>
                          </div>
                        </div>
                        <div class="ml-2 flex-shrink-0 flex">
                          <span 
                            :class="{
                              'px-2 py-1 text-xs rounded-full': true,
                              'bg-red-100 text-red-800': abnormal.type === '发热',
                              'bg-yellow-100 text-yellow-800': abnormal.type === '咳嗽',
                              'bg-purple-100 text-purple-800': abnormal.type === '其他症状'
                            }"
                          >
                            {{ abnormal.type }}
                          </span>
                        </div>
                      </div>
                      <div class="mt-2 sm:flex sm:justify-between">
                        <div class="sm:flex">
                          <div class="flex items-center text-sm text-gray-500">
                            <Thermometer class="flex-shrink-0 mr-1.5 h-4 w-4 text-gray-400" />
                            {{ abnormal.temperature }}°C
                          </div>
                          <div class="mt-2 flex items-center text-sm text-gray-500 sm:mt-0 sm:ml-6">
                            <MapPin class="flex-shrink-0 mr-1.5 h-4 w-4 text-gray-400" />
                            {{ abnormal.location }}
                          </div>
                        </div>
                        <div class="mt-2 flex items-center text-sm text-gray-500 sm:mt-0">
                          <Clock class="flex-shrink-0 mr-1.5 h-4 w-4 text-gray-400" />
                          <p>
                            {{ abnormal.time }}
                          </p>
                        </div>
                      </div>
                    </div>
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </main>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import {
  Bell,
  ChevronDown,
  LayoutDashboard,
  Users,
  ClipboardList,
  AlertTriangle,
  FileText,
  Settings,
  CheckCircle,
  CalendarCheck,
  AlertCircle,
  Clock,
  ArrowUp,
  ArrowDown,
  BarChart,
  PieChart,
  Thermometer,
  MapPin
} from 'lucide-vue-next';

// 统计数据
const statistics = ref({
  reportCompletionRate: 87,
  todayReportCount: 3254,
  abnormalCount: 42,
  notReportedCount: 486
});

// 学院上报情况
const collegeReports = ref([
  {
    name: '计算机学院',
    reportedCount: 520,
    totalCount: 520,
    completionRate: 100,
    abnormalCount: 5,
    lastReportTime: '今天 09:15'
  },
  {
    name: '机械工程学院',
    reportedCount: 1150,
    totalCount: 1250,
    completionRate: 92,
    abnormalCount: 12,
    lastReportTime: '今天 08:45'
  },
  {
    name: '经济管理学院',
    reportedCount: 750,
    totalCount: 1000,
    completionRate: 75,
    abnormalCount: 8,
    lastReportTime: '昨天 17:30'
  },
  {
    name: '外国语学院',
    reportedCount: 400,
    totalCount: 500,
    completionRate: 80,
    abnormalCount: 6,
    lastReportTime: '今天 08:20'
  },
  {
    name: '艺术设计学院',
    reportedCount: 0,
    totalCount: 300,
    completionRate: 0,
    abnormalCount: 0,
    lastReportTime: '无上报记录'
  }
]);

// 最近异常情况
const recentAbnormals = ref([
  {
    name: '张三',
    avatar: 'https://randomuser.me/api/portraits/men/2.jpg',
    college: '计算机学院',
    class: '软件工程2班',
    type: '发热',
    temperature: '38.2',
    location: '北京市海淀区',
    time: '今天 08:30'
  },
  {
    name: '李四',
    avatar: 'https://randomuser.me/api/portraits/women/3.jpg',
    college: '机械工程学院',
    class: '机械设计1班',
    type: '咳嗽',
    temperature: '36.8',
    location: '北京市朝阳区',
    time: '今天 07:45'
  },
  {
    name: '王五',
    avatar: 'https://randomuser.me/api/portraits/men/4.jpg',
    college: '经济管理学院',
    class: '会计学3班',
    type: '其他症状',
    temperature: '36.5',
    location: '北京市西城区',
    time: '昨天 21:15'
  },
  {
    name: '赵六',
    avatar: 'https://randomuser.me/api/portraits/women/5.jpg',
    college: '外国语学院',
    class: '英语2班',
    type: '发热',
    temperature: '37.8',
    location: '北京市海淀区',
    time: '昨天 18:20'
  }
]);
</script>